<template>
	<view class="user">
		<!-- 用户信息 -->
		<!-- <view class="xin">
			<text class="iconfont icon-xin"></text>
			<text v-if="bzj == 1">已缴纳诚信保证金</text>
			<text v-else>未缴纳诚信保证金</text>
		</view> -->
		<view class="user_info">
			<view class="infos_box">
				<view class="avatar">
					<image :src="user_data.headimgurl" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						<view class="xin">
							<text class="iconfont icon-xin" v-if="bzj == 1"></text>
						</view>
						<text>{{ user_data.wnickname ? user_data.wnickname : "用户名"}}</text>
					</view>
					<view class="number">
						 <text v-if="token">NO: {{ token }}</text>
					</view>
					<view class="phone">
						Tel:{{ user_data.phone ? user_data.phone : "手机号"}}
					</view>
				</view>
			</view>
			<!-- 保证金标识 -->
			<view class="bzj">
				
				<!-- v-if="Role == 2 || Role == 6" -->
				<view class="dlcode" v-if="Role == 2 || Role == 6">
					<view class="code_box" v-if="dailiCode">
						<image :src="dailiCode" mode=""></image>
					</view>
					<view class="btn_box" v-else>
						<button type="primary" style="font-size: 20rpx;" @click="getCode">生成二维码</button>
					</view>
				</view>
			</view>
			<!-- 代理商二维码 -->
			
			
		</view>
		<!-- 按钮 -->
		<view class="menu_box">
			<view class="menu_item" v-for="(item, index) in list" :key="index" @click="showPage(item)">
				<view class="item" >
					<view class="menu_icon">
						<text :class="item.icon"></text>
					</view>
					<view class="menu_title">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{ icon: "iconfont icon-xiaoxi", name: "我的评价", route: "/pages/myrate/myrate"},
					{ icon: "iconfont icon-star", name: "收藏店铺"},
					
					{ icon: "iconfont icon-mail", name: "消息通知"},
					{ icon: "iconfont icon-cardb", name: "我的钱包", route: "/pages/mywallet/mywallet"},
				],
				dailiCode: "",
				bzj: "",
			}
		},
		props: {
			user_data: Object
		},
		computed: {
			token() {
				return this.$store.state.token
			},
			Role() {
				return this.$store.state.UserRole
			},
		},
		mounted() {
			// this.getCode()
			this.HasCode()
			this.hasBaozheng()
		},
		methods: {
			// 代理商二维码生成或获取
			async getCode() {
				let res = await this.$Request("POST","/Index/agenterweima", { token: this.token })
				// console.log(res);
				if(res.data.code == 200 ) {
					this.dailiCode= res.data.data.erweima 
				} 
			},
			// 查看代理商是否有二维码
			async HasCode() {
				console.log(this.Role);
				let res = await this.$Request("POST","/order/kanerweima ", { token: this.token })
				// console.log(res);
				if(res.data.code == 200 ) {
					this.dailiCode= res.data.data.erweima 
				} else {
					this.getCode()
				}
			},
			// 查看用户是否交过保证金
			async hasBaozheng() {
				let res = await this.$Request("POST", "/order/isdeposit",{ token: this.token })
				let code = res.data.code 
				 // console.log(res);
				if(code == 202) {
					this.bzj = res.data.data
				} 
			},
			// 去耳机页面
			showPage( item ) {
				uni.navigateTo({
					url: `${item.route}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		width: 100%;
		box-sizing: border-box;
		.user_info {
			width: 100%;
			background: #007AFF;
			color: #FFFFFF;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// height: 100rpx;
			.infos_box {
				// width: 100%;
				width: 450rpx;
				display: flex;
				align-items: center;
				.avatar {
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border-radius: 50%;
					image {
						width: 100rpx;
						height: 100rpx;
					}
				}
				.info {
					margin-left: 30rpx;
					// height: 100rpx;
					flex: 1;
					.phone {
						font-size: 22rpx;
						line-height: 40rpx;
					}
					.number {
						font-size: 22rpx;
						line-height: 40rpx;
					}
					.name {
						line-height: 60rpx;
						width: 100%;
						box-sizing: border-box;
						display: flex;
						
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			.bzj {
				flex:1;
				
				.dlcode {
					width: 100%;
					text-align: right;
					.code_box {
						width: 150rpx;
						height: 150rpx;
						image {
							width: 150rpx;
							height: 150rpx;
						}
					}
				}
			}
		}
		.menu_box {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #007AFF;
			color: #fff;
			.menu_item {
				text-align: center;
				.item {
					.menu_icon {
						font-size: 40rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
	.xin {
		line-height: 60rpx;
		padding-top: 3rpx;
		margin-right: 5rpx;
	}
</style>
